import { useRef, useImperativeHandle } from 'react'
import { useNavigate } from 'react-router'
import Copy from '$tp/copy'
/* -------------------------------------------------------- Declare -- */
const { $lazy, $ } = window
/* -------------------------------------------------------- Async Component -- */
const SearchTable = $lazy.hook(()=>import('#cpt/temp/SearchTable'))
const className = 'nosel cp abs_full fxm pl5'
/* -------------------------------------------------------- Page Component -- */
const Component = ({ dbRef, database }, ref) => {
	const tableRef = useRef()
	const navigate = useNavigate()
	
	const onOk = () => {
		$.ref($.ref(dbRef)).tableRef().refresh()
	}
	
	useImperativeHandle( ref, () => tableRef )
	
	const config = {
		page : {
			title: { title:'数据库 - ' + database, titleMode:2 },
			minWidth:0,
			// controls	: [
			// 	{ mode:'del', abs:1},
			// ]
		},
		// 搜索配置
		search : {
			query 		: { database },
			data:[
				{ label:'表名称', 	name:'table_name' },
			]
		},
		// 表格配置
		table: {
			api 		: 'mysql/table',
			delApi 		: 'mysql/table/del',
			paging 		: 0,
			idStr 		: 'table_name',
			max 		: 500,
			cols		: [
				{ title: '表', 			dataIndex: 'table_name', width:250, sorter:1, render: t => {
					return (
						<div className={className} onClick={e=>e.stopPropagation()}>
							<div className='ex' onClick={()=>{$.pushNext(navigate, '/structure', { t })}}><b className='ar f13'>{t}</b></div>
							<Copy t={t}/>
						</div>
					)
				}},
				{ title: 'Size / MB', 	dataIndex: 'Size(MB)', width:100 },
			],
			controls 	: {
				width: 80,
				data: ({ table_name }) => [
					{ mode:'delPop', label:'删除', way:'post', abs:0, onOk, param:{table_name, database} },
					// { mode:'confirm', label:'id 重新排序', abs:0, api: 'mysql/sort_id', param: { database }}
				]
			}
		}
	}
	return <SearchTable ref={tableRef} {...config}/>
}
export default Component